<template>
<div class="header">
  <div class="header-left">
    <logo/>
  </div>

  <div  class="header-right" >
      <search-box/>
      <nav-bar/>
      <addition/>
  </div>

</div>
</template>

<script>
import Logo from './header/Logo'
import SearchBox from './header/SearchBox'
import NavBar from './header/NavBar'
import Addition from './header/Addition'

export default {
  name: 'HomeHeader',
  components: {
    Addition,
    NavBar,
    SearchBox,
    Logo
  }

}
</script>

<style lang="stylus" scoped>
.header
  display: flex;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  border-bottom: #FAFAFA solid 2px;
  padding-left: 10px;
  background: #FAFAFA;
  z-index: 300;
  font-size: 16px;
  .header-left
    display: flex;
    align-items: center;
  .header-right
    display: flex;
    align-items: center;

</style>
